<template>
	<view class="table-wrapper">
		<view class="table-title">
			<text>图表分析</text>
		</view>
		<view class="table-container">
			<table>
				<thead>
					<tr>
						<th style="text-align: center;width: auto;white-space: nowrap" v-for="(header, index) in headers"
							:key="index">
							{{ header }}
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(row, rowIndex) in data" :key="rowIndex">
						<td style="text-align: center" v-for="(cell, cellIndex) in row" :key="cellIndex">
							{{ cell }}
						</td>
					</tr>
				</tbody>
			</table>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TableComponent",
		props: {
			headers: {
				type: Array,
				required: true,
			},
			data: {
				type: Array,
				required: true,
			},
		},
	};
</script>

<style scoped>
	.table-wrapper {
		width: 100%;
	}
	
	.table-title {
		padding: 20rpx 0;
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		color: #333;
		background: linear-gradient(90deg, rgba(0,103,255,0.1) 0%, rgba(0,103,255,0.3) 50%, rgba(0,103,255,0.1) 100%);
		border-radius: 8rpx;
		margin-bottom: 10rpx;
	}

	.table-container {
		width: 100%;
		min-height: 500rpx;
		/* padding: 20rpx; */
		overflow: auto;
	}

	table {
		width: 100%;
		border-collapse: collapse;
		border: 1px solid #000;
	}
	
	table th {
		background: rgba(255, 255, 255, .05);
		border: 1px solid #000;
	}

	tbody tr {
		background: rgba(255, 255, 255, .05);
		border: 1px solid #000;
	}

	tbody tr:nth-child(odd) {
		background: none;
	}

	th,
	td {
		border: none;
		padding: 8px;
		text-align: left;
		font-size: 12px;
		border: 1px solid #000;
	}

	th {
		font-weight: bold;
	}
</style>